<template>
  <a-card :bordered="false">
    <a-spin :spinning="spinning != 0">
      <!-- 查询区域-->
        <div class="table-page-search-wrapper">
            <a-form layout="inline">
                <a-row :gutter="24">
                  <a-col :md="6" :sm="8">
                    <a-form-item :label="$t('m.system.sqlconfig.entity.sqlName')">
                      <a-input placeholder="" v-model="queryParam.sqlName$lk"></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :md="6" :sm="8">
                    <a-form-item :label="$t('m.system.sqlconfig.entity.sqlCode')">
                      <a-input placeholder="" v-model="queryParam.sqlCode$lk"></a-input>
                    </a-form-item>
                  </a-col>
                  <a-col :md="6" :sm="8">
                    <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                      <a-button type="primary" @click="searchQuery" icon="search">{{ $t('m.common.button.query') }}</a-button>
                      <a-button type="default" @click="searchReset" icon="reload" style="margin-left: 8px">{{ $t('m.common.button.reset') }}</a-button>
                    </span>
                  </a-col>

                </a-row>
            </a-form>
        </div>

      <!-- 操作按钮区域 -->
    <div class="table-operator" style="margin-top: 10px">
            <a-button @click="handleAdd" type="primary"
                      icon="plus">{{ $t('m.common.button.add') }}</a-button>
            <a-button @click="handleBatchDel" type="default"
                      icon="delete">{{ $t('m.common.button.delete') }}</a-button>
         <a-button type="default" icon="download" @click="handleExportXls($t('m.system.sqlconfig.other.export_filename'))">{{ $t('m.common.button.export') }}</a-button>
          <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"
                    @change="handleImportExcel">
            <a-button type="default"  icon="import">{{ $t('m.common.button.import') }}</a-button>
          </a-upload>
    </div>

      <!-- table区域-begin -->
    <div>
        <a-table
                ref="table"
                size="middle"
                bordered
                :rowKey="rowKey"
                :columns="columns"
                :dataSource="dataSource"
                :pagination="pagination"
                :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
                @change="handleTableChange"
                :customRow="clickThenCheck"
        >
          <template slot="serialNum" slot-scope="text,record,index">
            {{(pagination.current-1) * pagination.pageSize + parseInt(index) + 1}}
          </template>

            <template slot="action" slot-scope="text, record">
              <a @click="handleEdit(record)">
                {{ $t('m.common.button.update') }}
              </a>
              <a-divider type="vertical"/>
              <a @click="handleDel(record)">
                {{ $t('m.common.button.delete') }}
              </a>
            </template>

        </a-table>
    </div>
    </a-spin>

    <!-- 表单区域 -->
    <ActAppSqlFormDialog ref="form" @refreshParent="modalFormOk"/>
  </a-card>
</template>

<script>

  import {ViewMixin} from '@/mixins/ViewMixin'
  import YchSelectUser from '@/components/ych/ych-user/YchSelectUser'
  import YchSelectDepart from '@/components/ych/ych-org/YchSelectDepart'
  import ActAppSqlFormDialog from './modules/ActAppSqlFormDialog'
  import YchConstant from "@/api/YchConstant";

  export default {
    name: "ActAppSqlViewList",
    mixins: [ViewMixin],
    components: {
      ActAppSqlFormDialog,
      YchSelectUser,
      YchSelectDepart
    },
    data() {
      return {
        formCode: 'ActAppSqlForm',
        tableName: 'act_app_sql',
        dictConfig: {},
        optionConfig: {},
    columns: [
        {
            title:this.$t('m.common.label.number'),
            dataIndex: '',
            key: 'rowIndex',
            width: 50,
            align: "center",
            scopedSlots: { customRender: 'serialNum' },
        },
        {
            title: this.$t('m.system.sqlconfig.entity.sqlName'),
            dataIndex: 'sqlName',
            align: 'center',
        },
        {
            title: this.$t('m.system.sqlconfig.entity.sqlCode'),
            dataIndex: 'sqlCode',
            align: 'center',
        },
        {
            title: 'SQL',
            dataIndex: 'sqlQuery',
            align: 'center',
        },
        /*{
            title: '所属应用，为空表示公共，预留扩展应用内配置用',
            dataIndex: 'groupId',
            align: 'center',
        },*/
       /* {
            title: '入参，预留扩展用',
            dataIndex: 'inParameter',
            align: 'center',
        },*/
        {
            title: 'Key',
            dataIndex: 'sqlKey',
            align: 'center',
        },
        {
            title: 'Text',
            dataIndex: 'sqlText',
            align: 'center',
        },
        {
            title: this.$t('m.eform.apptable.entity.dsName'),
            dataIndex: 'dsName',
            align: 'center',
        },
        /*{
            title: '排序',
            dataIndex: 'orderBy',
            align: 'center',
        },*/
        {
            title: this.$t('m.common.label.operate'),
            dataIndex: 'action',
            align: "center",
            width: 140,
            scopedSlots: { customRender: 'action' },
        }
    ],
        url: {
          list: YchConstant.PREFIX_EFORM +"/manage/actAppSql/list",
          delete: YchConstant.PREFIX_EFORM +"/manage/actAppSql/delete",
          deleteBatch: YchConstant.PREFIX_EFORM +"/manage/actAppSql/deleteBatch",
          exportXlsUrl: YchConstant.PREFIX_EFORM +"/manage/actAppSql/exportExcel",
          importExcelUrl: YchConstant.PREFIX_EFORM +"/manage/actAppSql/importExcel",
        },
      }
    },
    computed: {
      importExcelUrl: function () {
        return `${bootConfig[process.env.NODE_ENV].VUE_APP_URL}/${this.url.importExcelUrl}`;
      }
    },
    methods: {

    },
    watch: {
      pkFlg() {
        this.watchPk()
      }
    }
  }
</script>
<style lang="less" scoped>
</style>

